<template>
  <div class="bg">
    <img class="bgimg" src="../images/bg.png" alt="" />
    <div class="bgbox">
      <!-- 表单 -->
      <div class="box" v-if="show == '表单'">
        <div class="formbox">
          <form @submit="formSubmit" @reset="formReset">
            <div class="uni-form-item uni-column">
              <div class="title">姓名</div>
              <input
                class="uni-input"
                v-model="form.name"
                name="input"
                placeholder=""
              />
            </div>
            <div class="uni-form-item uni-column">
              <div class="title">联系方式</div>
              <input
                class="uni-input"
                v-model="form.phone"
                name="input"
                placeholder=""
              />
            </div>
            <div class="uni-form-item uni-column">
              <div class="title">营业部</div>
              <input
                class="uni-input"
                v-model="form.sales"
                name="input"
                placeholder=""
              />
            </div>
            <div class="uni-form-item uni-column">
              <div class="title">父母名称</div>
              <input
                class="uni-input"
                v-model="form.fmName"
                name="input"
                placeholder=""
              />
            </div>
            <div class="uni-form-item uni-column">
              <div class="title">收货地址</div>
              <input
                class="uni-input"
                name="input"
                v-model="form.address"
                placeholder=""
              />
            </div>
            <div class="uni-form-item uni-column">
              <div class="title">年龄</div>
              <input
                class="uni-input"
                name="input"
                v-model="form.age"
                placeholder=""
              />
            </div>
          </form>
        </div>
        <div style="text-align: center">
          <img src="../images/tj.png" alt="" class="tj" @click="formSubmit" />
        </div>
      </div>

      <!-- 信息提交 -->
      <div class="box" v-if="show == '信息提交'">
        <div class="dlxxBox">
          <div class="dlxx">
            <img src="../images/xx.png" alt="" />
            <span>点亮星星</span>
            <img src="../images/xx.png" alt="" />
          </div>
          <div class="formbox">
            <form>
              <div class="uni-form-item uni-column">
                <div class="title">感言</div>
                <textarea
                  class="textarea"
                  id=""
                  v-model="testimonials"
                  cols="30"
                  rows="10"
                  placeholder="请记录亲子共读时的阅读感言，字数不低于100字，并附亲子共读照片"
                ></textarea>
                <div class="choose">
                  <van-uploader
                    v-model="fileList"
                    :after-read="onRead"
                    multiple
                    upload-text="添加图片"
                  />
                </div>
              </div>
            </form>
          </div>
        </div>
        <div style="text-align: center">
          <img src="../images/tj.png" alt="" class="tj" @click="gySubmit" />
        </div>
      </div>

      <!-- 满5次 -->
      <div class="m5" v-if="show == '满5次'">
        <img src="../images/点亮成功1.png" alt="" />
        <div class="jxdl" @click="onJxdl"></div>
      </div>

      <!-- 未到5次 -->
      <div class="m5" v-if="show == '未满5次'">
        <img src="../images/点亮成功2.png" alt="" />
        <div class="jxdl" @click="onJxdl"></div>
      </div>
    </div>
  </div>
</template>
  <script setup>
import { useRoute } from "vue-router";
import { reactive, ref } from "vue";
import { showToast } from "vant";
import axios from "axios";
const route = useRoute();

const levels = route.query.levels;
// console.log("路由参数", levels);
const show = ref("表单");

const form = reactive({
  name: "",
  phone: "",
  sales: "",
  fmName: "",
  address: "",
  age: "",
});
const testimonials = ref("");
const fileList = ref([]);
// 继续点亮
const onJxdl = () => {
  console.log("继续答题");
  // 执行相关操作
};
// 上传
async function onRead(files) {
  // 以下为使用axios上传示例 具体根据后端更改
  try {
    for (let file of files) {
      // 使用FormData包装文件
      const formData = new FormData();
      formData.append("image", file.file); // 'image' 应与后端接收的字段名一致

      // 发送POST请求到服务器
      const response = await axios.post(
        "http://your-server-url/api/upload",
        formData,
        {
          headers: {
            "Content-Type": "multipart/form-data",
          },
        }
      );

      if (response.data.success) {
        // 成功上传后，更新fileList
        fileList.value.push({ url: response.data.url });
        Toast.success("文件上传成功");
      } else {
        Toast.fail("文件上传失败");
      }
    }
  } catch (error) {
    console.error("Upload error:", error);
    Toast.fail("上传出错");
  }
}
// 表单提交
const formSubmit = () => {
  // 提交表单数据
  console.log(form);
  if (!form.name) {
    showToast("请填写姓名！");
    return;
  }
  if (!form.phone) {
    showToast("请填写联系方式！");
    return;
  }
  if (!form.sales) {
    showToast("请填写营业部！");
    return;
  }
  if (!form.fmName) {
    showToast("请填写父母名称！");
    return;
  }
  if (!form.address) {
    showToast("请填写收货地址！");
    return;
  }
  if (!form.age) {
    showToast("请填写年龄！");
    return;
  }
};
// 点亮星星页面
const gySubmit = () => {
  if (!testimonials.value) {
    showToast("请输入不低100子的感言！");
  }
  //   图片数组fileList
  console.log(testimonials);
};
</script>
  <style lang="less" scoped>
.m5 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  img {
    width: 80vw;
  }
  .jxdl {
    border: 1px solid;
    position: absolute;
    height: 80px;
    left: 180px;
    top: 150px;
    width: 45%;
  }
}
.bg {
  position: relative;
  width: 100vw;
  height: 100vh;
}
.bgimg {
  width: 100%;
  height: 100%;
}
.bgbox {
  top: 0;
  position: absolute;
  height: 100vh;
  width: 100vw;
}
.box {
  width: 80vw;
  /* height: 70vh; */
  left: 50%;
  top: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  background-color: #7ac3ec;
  border-radius: 40px;
  padding: 10px;
}

.formbox {
  background-color: #fff;
  border-radius: 30px;
  padding: 20px;
}

.dlxxBox {
  background-color: #f7f7f7;
  border-radius: 30px;
  overflow: hidden;
}

.title {
  font-size: 28px;
  font-weight: bold;
}

.title::after {
  content: "*";
  color: red;
  margin-right: 5px;
  /* 可调整间距 */
}

.uni-input {
  border: 1px solid #ccc;
  height: 70px;
  width: 100%;
  border-radius: 5px;
  margin-top: 8px;
  padding-left: 10px;
  margin-bottom: 10px;
  font-size: 28px;
}

.dlxx {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px;
  font-size: 30px;
  font-weight: bold;
}

.textarea {
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-top: 8px;
  margin-bottom: 10px;
  font-size: 28px;
  width: 95%;
  padding: 10px;
  background-color: #e6e6e6;
}

.choose {
  margin-top: 20px;
}

.imgc {
  width: 150px;
}
.tj {
  width: 300px;
  margin-top: 20px;
}
</style>
  
  
  